<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

            #nb{
                color: seagreen;
            
            }
            div#nb{

                color: yellow;
            }

            .red{


                color: red;
            }

            div,p,span{

                color: skyblue;
            }
            /* 
            
                样式的冲突
                    -当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值
                    -此时就发生了两个样式的冲突

                发生样式冲突时,应用哪个样式由选择器的权重(优先级)设定的!

                选择器的权重
                    -行内样式       1,0,0,0
                    -id选择器       0,1,0,0
                    -类选择器       0,0,1,0
                    -元素选择器     0,0,0,1
                    -通配选择器     0,0,0,0
                    -继承的样式     没有优先级


                比较优先级时,需要将所有的选择器的优先级进行相加计算
                最后优先级越高 越优先显示(分组计算是单独计算的)
                    -选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
                

            */
            *{
                font-size: 20px;
            }


            div{
                font-size: 50px;
            }
    </style>
</head>
<body>
    <div id="nb" class="red d1">我直呼不可战胜<span>我是div中的span哟</span></div>
    <div >我直呼不可战胜</div>
</body>
</html>